<template>
  <div class="form">
    <div class="text item">
      <el-form
        ref="form"
        :model="form"
        status-icon
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="当 前 密 码" prop="currentPwd">
          <el-input
            v-model="form.currentPwd"
            type="password"
            autocomplete="off"
            show-password
          />
        </el-form-item>
        <el-form-item label="新　密　码" prop="newPwd">
          <el-input
            v-model="form.newPwd"
            type="password"
            autocomplete="off"
            show-password
          />
        </el-form-item>
        <el-form-item label="确 认 密 码" prop="confirmPwd">
          <el-input
            v-model="form.confirmPwd"
            type="password"
            autocomplete="off"
            show-password
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="updatePwd('form')"
          >立即修改</el-button>
          <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { updatePwd } from '@/api/customer'
import md5 from 'js-md5'
import { mapGetters } from 'vuex'

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (value.length < 6) {
        callback(new Error('密码长度不能少于6位'))
      } else if (value.length > 18) {
        callback(new Error('密码太长啦~'))
      } else {
        if (this.form.confirmPwd !== '') {
          this.$refs.form.validateField('confirmPwd')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.newPwd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    var validatePass3 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('当前密码不能为空'))
      } else {
        callback()
      }
    }
    return {
      user: this.$store.getters.user,
      form: {
        currentPwd: '',
        confirmPwd: '',
        newPwd: ''
      },

      rules: {
        newPwd: [{ validator: validatePass, trigger: 'blur' }],
        confirmPwd: [{ validator: validatePass2, trigger: 'blur' }],
        currentPwd: [{ validator: validatePass3, trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  methods: {
    // 修改密码
    updatePwd(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          const temp = { ...this.form }
          temp.newPwd = md5(temp.newPwd)
          temp.currentPwd = md5(temp.currentPwd)
          temp.confirmPwd = md5(temp.confirmPwd)
          temp.id = this.user.id
          console.log(temp)
          updatePwd(temp).then((res) => {
            this.$message.success(res.msg)
          })
        } else {
          return false
        }
      })
    },

    // 重置表单
    resetForm(form) {
      this.$refs[form].resetFields()
    }
  }
}
</script>

<style>
</style>
